import {
  CAvatar,
  CCard,
  CCardBody,
  CCardHeader,
  CCol,
  CProgress,
  CRow,
  CTable,
  CTableBody,
  CTableDataCell,
  CTableHead,
  CTableHeaderCell,
  CTableRow,
} from "@coreui/react";

import avatar1 from "../../assets/images/avatars/1.jpg";
import avatar2 from "../../assets/images/avatars/2.jpg";
import avatar3 from "../../assets/images/avatars/3.jpg";
import avatar4 from "../../assets/images/avatars/4.jpg";
import avatar5 from "../../assets/images/avatars/5.jpg";
import avatar6 from "../../assets/images/avatars/6.jpg";

import CIcon from "@coreui/icons-react";
import {
  cibCcAmex,
  cibGoogle,
  cibFacebook,
  cibLinkedin,
  cibTwitter,
  cilPeople,
  cilUser,
  cilUserFemale,
} from "@coreui/icons";

export const progressGroupExample1 = [
  { title: "Monday", value1: 34, value2: 78 },
  { title: "Tuesday", value1: 56, value2: 94 },
  { title: "Wednesday", value1: 12, value2: 67 },
  { title: "Thursday", value1: 43, value2: 91 },
  { title: "Friday", value1: 22, value2: 73 },
  { title: "Saturday", value1: 53, value2: 82 },
  { title: "Sunday", value1: 59, value2: 69 },
];

export const progressGroupExample2 = [
  { title: "Male", icon: cilUser, value: 53 },
  { title: "Female", icon: cilUserFemale, value: 43 },
];

export const progressGroupExample3 = [
  { title: "Organic Search", icon: cibGoogle, percent: 56, value: "191,235" },
  { title: "Facebook", icon: cibFacebook, percent: 15, value: "51,223" },
  { title: "Twitter", icon: cibTwitter, percent: 11, value: "37,564" },
  { title: "LinkedIn", icon: cibLinkedin, percent: 8, value: "27,319" },
];

export const tableExample = [
  {
    avatar: { src: avatar1, status: "success" },
    user: {
      name: "张三",
      new: true,
      registered: "Jan 1, 2023",
    },
    usage: {
      value: 50,
      period: "Jun 11, 2023 - Jul 10, 2023",
      color: "success",
    },
  },
  {
    avatar: { src: avatar2, status: "danger" },
    user: {
      name: "李四",
      new: false,
      registered: "Jan 1, 2023",
    },
    usage: {
      value: 66,
      period: "Jun 11, 2023 - Jul 10, 2023",
      color: "info",
    },
    activity: "5 minutes ago",
  },
  {
    avatar: { src: avatar3, status: "warning" },
    user: { name: "刘一", new: true, registered: "Jan 1, 2023" },
    usage: {
      value: 74,
      period: "Jun 11, 2023 - Jul 10, 2023",
      color: "warning",
    },
    activity: "1 hour ago",
  },
  {
    avatar: { src: avatar4, status: "secondary" },
    user: { name: "王五", new: true, registered: "Jan 1, 2023" },
    usage: {
      value: 98,
      period: "Jun 11, 2023 - Jul 10, 2023",
      color: "danger",
    },
    activity: "Last month",
  },
  {
    avatar: { src: avatar5, status: "success" },
    user: {
      name: "赵六",
      new: true,
      registered: "Jan 1, 2023",
    },
    usage: {
      value: 57,
      period: "Jun 11, 2023 - Jul 10, 2023",
      color: "primary",
    },
    activity: "Last week",
  },
  {
    avatar: { src: avatar6, status: "danger" },
    user: {
      name: "孙七",
      new: true,
      registered: "Jan 1, 2023",
    },
    usage: {
      value: 65,
      period: "Jun 11, 2023 - Jul 10, 2023",
      color: "success",
    },
    activity: "Last week",
  },
];

export default function Abilities() {
  return (
    <CRow>
      <CCol xs>
        <CCard className="mb-4">
          <CCardHeader>学生概况</CCardHeader>
          <CCardBody>
            <CTable align="middle" className="mb-0 border" hover responsive>
              <CTableHead className="text-nowrap">
                <CTableRow>
                  <CTableHeaderCell className="bg-body-tertiary text-center">
                    <CIcon icon={cilPeople} />
                  </CTableHeaderCell>
                  <CTableHeaderCell className="bg-body-tertiary">
                    姓名
                  </CTableHeaderCell>
                  <CTableHeaderCell className="bg-body-tertiary">
                    学习积极性
                  </CTableHeaderCell>
                </CTableRow>
              </CTableHead>
              <CTableBody>
                {tableExample.map((item, index) => (
                  <CTableRow v-for="item in tableItems" key={index}>
                    <CTableDataCell className="text-center">
                      <CAvatar
                        size="md"
                        src={item.avatar.src}
                        status={item.avatar.status}
                      />
                    </CTableDataCell>
                    <CTableDataCell>
                      <div>{item.user.name}</div>
                    </CTableDataCell>
                    <CTableDataCell>
                      <div className="d-flex justify-content-between text-nowrap">
                        <div className="fw-semibold">{item.usage.value}%</div>
                        <div className="ms-3">
                          <small className="text-body-secondary">
                            {item.usage.period}
                          </small>
                        </div>
                      </div>
                      <CProgress
                        thin
                        color={item.usage.color}
                        value={item.usage.value}
                      />
                    </CTableDataCell>
                  </CTableRow>
                ))}
              </CTableBody>
            </CTable>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  );
}
